<template>
	<view class="myResell">
		<view class="innerTabs">
			<!-- <view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 0}" @click="handleinnersellTabs(0)">
				<view class="">
					全部
				</view>
				<view v-if="sellIndex == 0" class="heng"></view>
			</view> -->
			<view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 1}" @click="handleinnersellTabs(1)">
				<view class="">
					待被拍
				</view>
				<view v-if="sellIndex == 1" class="heng"></view>
			</view>
			<view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 2}" @click="handleinnersellTabs(2)">
				<view class="">
					已被拍
				</view>
				<view v-if="sellIndex == 2" class="heng"></view>
			</view>
			<view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 3}" @click="handleinnersellTabs(3)">
				<view class="">
					已完成
				</view>
				<view v-if="sellIndex == 3" class="heng"></view>
			</view>
		</view>

		<view v-if="dataList.length" class="dataList">

			<view class="dataListitem" v-for="(item,index) in dataList" @click="handleDetail(item)">
				<view v-if="item.status == 0" class="statu">
					待拍卖
				</view>
				<view v-if="item.status == 1" class="statu" style="background-color: #E4C673;">
					已拍卖
				</view>
				<view v-if="item.status == 2 || item.status == 3" class="statu" style="background-color: #979797;">
					已完成
				</view>
				<view class="bianhao">
					<!-- 订单编号:213213215165165 -->
				</view>
				<view class="content">
					<image :src="item.image" mode="" style="width: 170rpx; height: 170rpx;border-radius: 10rpx;">
					</image>
					<view class="contentRight">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							拍中价格:￥{{item.all_price}}
						</view>
						<view  v-if="item.status == -1 || item.status == 0" class="maijia">
							<view class="maijiatext">
								卖家
							</view>
							<view class="maijianame">
								{{item.nickname}}
							</view>
						</view>
						<view  v-else class="maijia">
							<view class="maijiatext">
								买家
							</view>
							<view class="maijianame">
								{{item.buy_nickname}}
							</view>
						</view>
						
					</view>
				</view>
				<view class="heng"></view>
				<view class="time">
					下单时间:{{item.created_at}}
				</view>

				<view class="itemBottom">
					<view class="itemBottomleft">
						需支付：{{item.all_price}}
					</view>
					<view v-if="item.status ==0" class="itemBottomright">
						<view class="btns btnss">
							查看详情
						</view>
					</view>
					<view v-if="item.status ==1" class="itemBottomright">
						<view class="btns btnss">
							查看付款凭证
						</view>
					</view>
					<view v-if="item.status ==2" class="itemBottomright">
						<view class="btns btnss">
							查看详情
						</view>
					</view>
				</view>
				
				<view v-if="item.flag" class="zz">
					<image src="@/static/image/ywc.png" mode=""
						style="width: 250rpx;height: 200rpx;margin-top: 40rpx;margin-left: 10rpx;"></image>
				</view>

			</view>

		</view>

		<view v-else class="">
			<u-empty mode="data" text="暂无订单">
			</u-empty>
		</view>

		<view class="" style="height: 100rpx;"></view>



	</view>
</template>

<script>
	import {
		sellorderlist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				sellIndex: 1,
				statusList: [{
						status: 0
					},
					{
						status: 1
					},
					{
						status: 2
					},
				],
				dataList: [],
				statusFlag: 0,
			}
		},
		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			this.handlesellorderlist()
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
				setTimeout(() => {
					this.handlesellorderlist();
					uni.stopPullDownRefresh();
				}, 1000)
		},
		methods: {
			
			async handlesellorderlist() {
				let res = await sellorderlist({
					status: this.statusFlag
				})
				this.dataList = res.data.data
				console.log("卖品", res)
				this.dataList.forEach((item, index) => {
					//未支付 没有支付时间
					if(item.pay_time == null){
						item.flag = false
					}else{
						// 获取当前日期和时间
						let currentDate = new Date();
										
						// 计算日期差值（单位：毫秒）
						let diff = currentDate.getTime() - new Date(item.pay_time).getTime();
										
						// 将毫秒转换为天数
						let diffDays = diff / (1000 * 3600 * 24);
						// 
						console.log("333", new Date(item.pay_time).getTime(), currentDate.getTime(), diff,
							diffDays)
										
						// 判断是否超过两天
						if (diffDays >= 2) {
							item.flag = true
							console.log("超出两天");
						} else {
							item.flag = false
							console.log("未超出两天");
						}
					}
				
				})
			},
			handleinnersellTabs(index) {
				this.sellIndex = index
				if (this.sellIndex == 3) {
					this.statusFlag = 3
				} else {
					this.statusFlag = this.sellIndex - 1
				}
				this.handlesellorderlist()
			},
			handleDetail(item) {
				if (item.flag == false) {
					uni.navigateTo({
						url: `../subsell/subsellOrderdetail?id=${item.id}`
					})
				}
				
			},

		}
	}
</script>

<style scoped lang="scss">
	.myResell {
		.innerTabs {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.innerTabsItem {
				width: 33.33%;
				height:80rpx ;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;

				.heng {
					width: 40rpx;
					height: 4rpx;
					background: #359691;
					border-radius: 304rpx 304rpx 304rpx 304rpx;
					margin-top: 16rpx;
				}
			}

			.innerTabsItemed {
			background-color: #359691;
			color: #ffffff;
			}
		}

		.dataList {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.dataListitem {
				width: 100%;
				height: 384rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-bottom: 30rpx;
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				position: relative;
				
				.zz {
					width: 100%;
					height: 384rpx;
					background: rgba(0, 0, 0, 0.7);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.statu {
					width: 90rpx;
					height: 38rpx;
					background: #359691;
					border-radius: 0rpx 8rpx 0rpx 8rpx;
					opacity: 1;
					font-size: 20rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38rpx;
					text-align: center;
					position: absolute;
					top: 0;
					right: 0;
				}

				.bianhao {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #707070;
					line-height: 28rpx;
				}

				.content {
					display: flex;
					width: 100%;
					margin-top: 20rpx;

					.contentRight {
						height: 170rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 30rpx;

						.name {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
						}

						.price {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #707070;
							line-height: 28rpx;
						}

						.maijia {
							display: flex;
							height: 36rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							opacity: 1;
							border: 2rpx solid #359691;

							.maijiatext {
								width: 78rpx;
								height: 36rpx;
								background: #359691;
								color: #ffffff;
								font-size: 28rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 36rpx;
								text-align: center;
							}

							.maijianame {
								width: 292rpx;
								font-size: 28rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #707070;
								line-height: 36rpx;
								text-align: center;
							}
						}
					}
				}

				.heng {
					width: 100%;
					height: 1rpx;
					background-color: #D8D8D8;
					margin-top: 20rpx;
				}

				.time {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #707070;
					line-height: 28rpx;
					margin-top: 20rpx;
				}

				.itemBottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;

					.itemBottomleft {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					.itemBottomright {
						display: flex;
						height: 28rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;

						.btns {
							height: 36rpx;
							border-radius: 512rpx 512rpx 512rpx 512rpx;
							opacity: 1;
							border: 2rpx solid #359691;
							padding: 0 24rpx;
							color: #359691;
						}

						.btnss {
							background-color: #359691;
							color: #ffffff;
							margin-left: 24rpx;
						}
					}
				}


			}
		}

	}
</style>